<template>
    <div class="recording-indicator" v-if="isVisible">
        <img class="icon" src="../../assets/class/麦克风白.png">
        <span class="text">正在录音</span>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const isVisible = ref(false) // 控制组件显示与隐藏  

// 显示组件  
const showRecordingIndicator = () => {
    isVisible.value = true
}

// 隐藏组件  
const hideRecordingIndicator = () => {
    isVisible.value = false
}

// 导出方法
defineExpose({ showRecordingIndicator, hideRecordingIndicator })
</script>

<style scoped>
.recording-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    /* 灰色背景，50%透明度 */
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000001;
}

.icon {
    /* 根据你的SVG图标调整尺寸和样式 */
    width: 30px;
    height: 30px;
    margin-right: 10px;
    color: white;
}

.text {
    color: white;
}
</style>